<script setup>
const props = defineProps({
  name: String,
  src: String,
  size: {
    type: [Number, String],
    default: 15,
  },
  circle: {
    type: Boolean,
    default: false,
  },
  color: String,
  defaultImg: String,
})

const style = computed(() => {
  const size = typeof props.size === 'string' ? props.size : `${props.size}px`
  return {
    width: size,
    height: size,
    borderRadius: props.circle ? '50%' : null,
    color: props.color,
  }
})

const imgLoadError = ref(false)

function imgError() {
  imgLoadError.value = true
}
</script>

<template>
  <svg class="svg-icon" :style="style">
    <use v-if="props.name && !props.src" :xlink:href="`#icon-${props.name}`"></use>
    <image
      v-if="props.src"
      :xlink:href="imgLoadError ? props.defaultImg : props.src"
      :height="style.height"
      :width="style.width"
      :onerror="imgError" />
  </svg>
</template>

<style scoped>
.svg-icon {
  display: inline-block;
  vertical-align: -2px;
  fill: currentColor;
}
</style>
